<template>
	<view class="containar">
		<view class="avatarUrl">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="avatarUrl" class="refreshIcon"></image>
			</button>
		</view>
		<view class="nickname">
			<text>昵称：</text>
			<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur"
				placeholder="请输入昵称" @input="bindinput"/>
		</view>
 
		<view class="btn">
			<view class="btn-sub" @click="onSubmit">保存</view>
		</view>
	</view>
</template>
<script>
	import { mapState , mapMutations} from 'vuex'
	export default {
			data() {
				return {
					avatarUrl: 'https://i04piccdn.sogoucdn.com/81d985c8c712e221',
					nickName: ''
				};
			},
			onLoad(option) {},
			methods: {
				...mapMutations('m_user', ['updatauserinfo2']),
				//获取用户昵称
				bindblur(e) {
					this.nickName = e.detail.value; // 获取微信昵称
				},
				bindinput(e){
					this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				},
				
				// 获取用户头像
				onChooseavatar(e) {
					return uni.$showMsg('暂时不提供头像选择功能')
				// 	let self = this;
				// 	let {
				// 		avatarUrl
				// 	} = e.detail;
				// 	uni.showLoading({
				// 		title: '加载中'
				// 	});
				// 	获取头像
				// 	uni.uploadFile({
				// 		url: '',
				// 		filePath: avatarUrl,
				// 		name: 'file',
				// 		header: {
				// 			token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjU3MywiaWQiOjU3MywiY3JlYXRlZEF0IjoiMjAyMi0xMi0wOSAxMToyNzowOSIsInVwZGF0ZWRBdCI6IjIwMjItMTItMDkgMTE6Mjc6MDkiLCJkZWxldGVkQXQiOm51bGwsImFjY291bnQiOiIxODEwNjQ5MDExQHFxLmNvbSIsImxldmVsIjowLCJleHAiOjE2NzE1MTg0NzQsImlzcyI6ImFwaV9vcGVuIiwibmJmIjoxNjcwOTEyNjc0fQ.Zj98WZ7Wp7AKfl2Xbt3ZDSofWBH7ziq6uKav7YZ4X_0',
				// 		},
				// 		success: uploadFileRes => {
	   //                      // 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
				// 			let data = JSON.parse(uploadFileRes.data);
				// 			if (data.code === 0) {
				// 				this.avatarUrl = data.data;
				// 			}
				// 		},
				// 		fail: (error) => {
				// 			uni.showToast({
				// 				title: error,
				// 				duration: 2000
				// 			});
				// 		},
				// 		complete: () => {
				// 			uni.hideLoading();
				// 		}
				// 	});
				},
				onSubmit() {
					if(this.nickName === '') return uni.$showMsg('请输入昵称')
	                // 这里做自己公司的存储逻辑
					const querobj = {
						image: this.avatarUrl,
						name: this.nickName
					}
					this.updatauserinfo2(querobj)
				}
			}
		};
</script>

<style lang="scss">
.containar {
	.avatarUrl {
		padding: 80rpx 0 40rpx;
		background: #fff;
		button {
			background: #fff;
			line-height: 80rpx;
			height: auto;
			width: auto;
			padding: 20rpx 30rpx;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			.refreshIcon {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				object-fit: contain;
			}
			.jt{
				width: 14rpx;
				height: 28rpx;
			}
		}
	}
	.nickname{
		    background: #fff;
		    padding: 20rpx 30rpx 80rpx;
		    display: flex;
		    align-items: center;
		    justify-content: center;
			.weui-input{
				padding-left: 60rpx;
			}
	}
	.btn{
		width: 100%;
		.btn-sub{
			width: 670rpx;
			margin: 80rpx auto 0;
			height: 90rpx;
			background: #DF8585;
			border-radius: 45rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
		}
	}
}
</style>
